<template>
    <div class="layout-container">
        <aside :style="{ width: is_collapse ? '64px' : '180px' }">
            <Menu />
        </aside>
        <main :style="{ 'margin-left': is_collapse ? '64px' : '180px' }">
            <BreadNav />
            <router-view />
        </main>
    </div>
</template>

<script>
import Menu from "@/components/Menu"
import BreadNav from "@/components/BreadNav"
import { mapState } from "vuex"

export default {
    components: {
        Menu,
        BreadNav
    },
    computed: {
        ...mapState("nav", ["is_collapse"])
    }
}
</script>

<style lang="less">
.layout-container {
    display: flex;
    aside {
        height: 100vh;
        overflow: hidden;
        transition: 0.3s;
        position: fixed;
    }
    main {
        width: 100%;
        padding: 45px 0 0 10px;
        box-sizing: border-box;
        overflow: hidden;
        transition: .3s;
        height: 100vh;
        overflow-y: scroll;
    }
}
</style>
